<template>
    <div class="head">
        <ul class="nav">
            <li>
                <router-link to="/">
                    <img src="../assets/img/logo-ea5.png">
                </router-link>
            </li>
            <li>
                <router-link to="/singer">歌手</router-link>
            </li>
            <li><router-link to="/songlist">榜单</router-link></li>
            <li><router-link to="/mine">我的</router-link></li>
            <li><router-link to="/search">搜索</router-link></li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "myhead"
    }
</script>

<style lang="less" scoped>
    .active{
        color: orange;
        font-weight: bold;
    }
    .head{
        height: 50px;
        .nav{
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-around;
            align-items: center;
            font-size: 16px;
            background-color: #f9f9f9;
            color: #999;
            /*line-height: 50px;*/
            img{
                margin-top: 10px;
                width: 30px;
                height: 30px;
            }
        }

    }

</style>